<template>
  <div class="home" v-loading="loading">
    <homeTop />
    <homeMenu @getLayoutList="getLayoutList" />
    <div class="layout">
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        >
        <el-table-column label="" v-for="(item,index) in 12" :key="index">
          <template #default="{ row }">
            <div class="size1" :class="{'hide': !isHasSetting(row[index].index)}">
              <template v-if="row[index].info">
                <card :info="row[index].info" :type="isHasSetting(row[index].index).cardCode" />
              </template>
              <template v-else>
                <div class="card"></div>
              </template>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="footer">
      <div>京网文[2023]1747-060号</div>
      <div>京公网备11010502000501号</div>
      <div>京ICP备11017824号-4号</div>
      <div>京ICP证130164号</div>
      <div>Copyright © 2006-2024 江苏创能科技有限公司 版权所有</div>
    </div>
  </div>
</template>

<script>
import card from '../cards/index';
import homeTop from './homeTop';
import homeMenu from './homeMenu';
import { querySystemBodyLayout, queryCardData } from '@/api/layout'
export default {
  name: 'test',
  components: {
    card,
    homeTop,
    homeMenu
  },
  data () {
    return {
      systemCode: "",
      menuCode: "",
      loading: false,
      tableData: [],  //表格，二维数组
      layoutTableSet: [],  //合并的集合

      timeout: [],
    }
  },
  created() {
    // 系统风格 0暗色风格 1白色风格
    try {
      let systemUiType = sessionStorage.getItem("systemUiType");
      if(systemUiType == 1) {
        require('@/styles/white.scss');
      } else {
        require('@/styles/black.scss');
      }
    } catch (err) {
      console.error("未找到主题样式！");
    }
  },
  beforeDestroy() {
    if(this.timeout.length > 0) {
      this.timeout.forEach(item => {
        clearTimeout(item);
      })
    }
  },
  methods: {
    async getLayoutList (menuCode) {
      if(this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearTimeout(item);
        })
      }

      this.menuCode = menuCode;
      this.loading = true
      this.tableData = [];
      this.layoutTableSet = [];
      this.timeout = [];

      const {object} = await querySystemBodyLayout({
        menuCode: menuCode
      })
      let list = object || [];
      list.forEach((item, sIndex) => {
        this.layoutTableSet.push({
          index: item.indexNum,
          col: item.sizeType.split("*")[1],
          row: item.sizeType.split("*")[0],
          cardCode: item.cardCode,
        })
        this.timeout.push(-1);
        this.queryCardData(item, sIndex);
      })

      for(let i = 1; i <= 6; i++) {
        let arr = []
        for(let j = 1; j <= 12; j++) {
          arr.push({
            index: j + (i - 1) * 12
          });
        }
        this.tableData.push(arr);
      }
      this.loading = false;
      this.$nextTick(() => {
        this.tableRowClassName();
      })
    },

    /**
     * 合并表格方法
     */
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      let index = columnIndex + 1 + rowIndex * 12;
      for(let i in this.layoutTableSet) {
        if(this.layoutTableSet[i].index == index) {
          return [this.layoutTableSet[i].col || 1, this.layoutTableSet[i].row || 1];
        } else if(this.layoutTableSet[i].row && this.layoutTableSet[i].col) {
          let arr = [];
          for(let k = 0; k < this.layoutTableSet[i].col; k++) {
            for(let m = 0; m < this.layoutTableSet[i].row; m++) {
              if(k == 0 && m == 0) {
                continue;
              }
              arr.push(this.layoutTableSet[i].index + m + k * 12);
            }
          }
          if(arr.includes(index)) {
            return [0, 0]
          }
        } else if(this.layoutTableSet[i].row && (index > this.layoutTableSet[i].index && index < this.layoutTableSet[i].index + this.layoutTableSet[i].row)) {
          return [0, 0]
        } else if(this.layoutTableSet[i].col && (index > this.layoutTableSet[i].index && (index - this.layoutTableSet[i].index) % 12 == 0 && (index - this.layoutTableSet[i].index) / 12 < this.layoutTableSet[i].col)) {
          return [0, 0]
        }
      }
    },

    // 行样式调整
    tableRowClassName() {
      let rows = document.getElementsByClassName("el-table__row");
      let arr = [];
      let obj = rows[0];
      let num = 1;
      let height = document.getElementsByTagName("tbody")[0].getBoundingClientRect().height / 6;
      for(let i = 0; i < rows.length; i++) {
        if(rows[i].childNodes.length == 0) {
          num ++;
          rows[i].className = "el-table__row row0";
          obj.style.height = height * num + "px";
        } else {
          obj = rows[i];
          num = 1;
        }
        arr.push(rows[i].childNodes.length);
      }
      return '';
    },

    isHasSetting(index) {
      return this.layoutTableSet.find(item => {
        return item.index == index;
      })
    },

    // 卡片查询数据和图标接口
    queryCardData(row, sIndex) {
      queryCardData({
        menuCode: row.menuCode,
        indexNum: row.indexNum
      }).then(res => {
        if(res.status == 200 && res.object) {
          res.object.itemList[0].itemValue = Number(res.object.itemList[0].itemValue);
          this.$set(this.tableData[Math.floor((row.indexNum - 1) / 12)][(row.indexNum - 1) % 12], 'info', res.object);
        }

        let _this = this;
        this.timeout[sIndex] = setTimeout(() => {
          _this.queryCardData(row, sIndex);
        }, 10000);
      })
    },
  }
}
</script>
<style lang="scss" scoped>
</style>
